<template>
  <!-- 保单信息查询 -->
  <Card>
    <Form :model="form" ref="form" :rules="rules" label-position="right" label-width="90">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道">
            <Select v-model="form.branchType" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="管理机构" prop="managecom">
            <Select v-model="form.managecom" clearable>
              <Option v-for="item in organizationList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构">
            <Select v-model="form.agentgroup" @on-change="val => getBranchmanager(val, { fileByte: 'groupDistrict' })"
              clearable>
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- bran -->
          <FormItem label="区部组">
            <Select v-model="form.groupDistrict" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="客户号">
            <Input v-model="form.customerNo" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="保单号">
            <Input v-model="form.contNo" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="客户姓名">
            <Input v-model="form.customerName" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <!-- 新增满期状态查询条件  -->
        <i-col span="6">
          <FormItem label="满期状态">
            <Select v-model="form.expireState" clearable>
              <Option v-for="item in expireList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6" style="display: flex;justify-content: flex-start;margin-left:20px">
          <Button type="primary" @click="handleSearch()" :loading="isLoading" icon="md-search"
            style="margin-right:20px;">查询</Button>
          <!--  toDetail({contNo:'1'})-->
          <Button @click="resetForm()" icon="md-refresh">重置</Button>
        </i-col>
      </Row>
    </Form>

    <Table :columns="columns" :data="tableData" style="margin-top:10px">
      <template slot-scope="{ row }" slot="contState">
        <div v-if="row.contState.indexOf('失效') > -1" class="state-cls state-cls-no-used">{{ row.contState }}</div>
        <div v-else-if="row.contState.indexOf('失效') > -1" class="state-cls state-cls-end">{{ row.contState }}</div>
        <div v-else class="state-cls state-cls-used">{{ row.contState }}</div>
      </template>
      <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="toDetail(row)">查看详情</span>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>
  </Card>
</template>

<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
export default {
  name: "policyInfo",
  mixins: [loadResourcesMixin, tableChangeMixin, getSelectListMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "selectguaranteesliplists",
        disableMixinCreated: true,
      },
      rules: {
        managecom: [
          {
            required: true,
            message: "请选择管理机构",
            trigger: "change",
          },
        ],
      },
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: "70",
        },
        {
          title: "管理机构",
          key: "managecom",
          align: "center",
          width: "200",
        },
        {
          title: "销售机构",
          key: "agentgroup",
          align: "center",
          width: "200",
        },
        {
          title: "区部组",
          key: "groupDistrict",
          align: "center",
          width: "90",
        },
        {
          title: "保单号",
          key: "contNo",
          align: "center",
          width: "170",
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: "90",
        },
        {
          title: "被保人",
          key: "insuredName",
          align: "center",
          width: "90",
        },
        {
          title: "渠道",
          key: "branchType",
          align: "center",
          width: "80",
        },
        {
          title: "主险名称",
          key: "riskName",
          align: "center",
          width: "200",
        },
        {
          title: "当前保费",
          key: "premium",
          align: "center",
          width: "100",
        },
        {
          title: "保单生效日",
          key: "cvaliDate",
          align: "center",
          width: "110",
        },
        {
          title: "业务员",
          key: "agentName",
          align: "center",
          width: "110",
        },
        {
          title: "保单状态",
          slot: "contState",
          align: "center",
          width: "160",
        },
        // 列表中新增四项
        {
          title: "交费止期",
          key: "payEndDate",
          align: "center",
          width: "160",
        },
        {
          title: "保障止期",
          key: "insuredEndDate",
          align: "center",
          width: "160",
        },
        {
          title: "满期领取日期",
          key: "expireGetDate",
          align: "center",
          width: "200",
        },
        {
          title: "满期领取金额",
          key: "expireGetMoney",
          align: "center",
          width: "200",
        },
        {
          title: "操作",
          slot: "operate",
          align: "center",
          width: "130",
          fixed: "right",
        },
      ],
	  // 满期状态
      expireList:[
        {
          key:"1",
          value:"交费期满"
        },
        {
          key:"2",
          value:"保障期满"
        },
      ]
    };
  },
  mounted() {
    let policyInfo = JSON.parse(localStorage.getItem("policyInfo"));
    let policyInfoPage = JSON.parse(localStorage.getItem("policyInfoPage"));
    if (policyInfo) {
      this.$set(this, "form", policyInfo);
      this.$set(this, "ipagination", policyInfoPage);
      this.$nextTick(() => this.loadResources());
      localStorage.removeItem("policyInfo");
      localStorage.removeItem("policyInfoPage");
    }
	if(!this.form.expireState) {
        this.form.expireState = '0'
    }
  },
  methods: {
	handleSearch(){
		if(!this.form.expireState) {
			this.form.expireState = '0'
		}
		this.loadResources()
	},	
    toDetail(row) {
      localStorage.setItem("policyInfo", JSON.stringify(this.form));
      localStorage.setItem("policyInfoPage", JSON.stringify(this.ipagination));
      this.$router.push({
        name: "expiryPolicyDetail",
        query: { contNo: row.contNo },
      });
    },
    checkMust() {
      let flag;
      this.$refs.form.validate((valid) => (flag = valid));
      let flagM =
        this.form.customerNo || this.form.contNo || this.form.customerName;
      !flagM && this.$Message.info("请输入客户号、保单号或者客户姓名查询");
      // console.log("flag", flag, !!flagM);
      return !!flagM && flag;
    },
  },
};
</script>
<style scoped>
.state-cls {
  display: inline-block;
  min-width: 80px;
  padding: 0 10px;
  height: 26px;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 26px;
  text-align: center;
  margin: auto;
}

.state-cls-used {
  color: #14d595;
  background: rgba(20, 213, 149, 0.15);
}

.state-cls-no-used {
  background: #fff4ed;
  color: #f23031;
}

.state-cls-end {
  background: #eeeeee;
  color: #999999;
}
</style>
